<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>甜蜜留言箱</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- PWA 配置 -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#e84393">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💌</text></svg>">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --primary-color: #e84393;
            --secondary-color: #fd79a8;
            --background-color: #fff9fb;
            --card-color: #ffffff;
            --text-color: #5a3e36;
            --border-color: #ffe0e9;
            --success-color: #4CAF50;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        }
        
        /* 登录界面 */
        .login-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #ffafbd 0%, #ffc3a0 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .login-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        
        .login-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            width: 100%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .login-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .login-title {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        .login-subtitle {
            color: #666;
            margin-bottom: 30px;
        }
        
        .password-input {
            width: 100%;
            padding: 15px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            font-size: 1.1rem;
            margin-bottom: 20px;
            text-align: center;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .password-input:focus {
            border-color: var(--primary-color);
        }
        
        .login-btn {
            width: 100%;
            padding: 15px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(232, 67, 147, 0.3);
        }
        
        .login-btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 6px rgba(232, 67, 147, 0.3);
        }
        
        .login-error {
            color: #ff4757;
            margin-top: 10px;
            font-size: 0.9rem;
            display: none;
        }
        
        /* 主容器 */
        .app-container {
            max-width: 100%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 15px 20px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .header-title {
            flex: 1;
        }
        
        .header h1 {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .header p {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .logout-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .logout-btn:active {
            background: rgba(255, 255, 255, 0.3);
        }
        
        /* 安装提示 */
        .install-prompt {
            position: fixed;
            bottom: 80px;
            left: 20px;
            right: 20px;
            background: white;
            border-radius: 15px;
            padding: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            z-index: 99;
            display: none;
            align-items: center;
            gap: 15px;
        }
        
        .install-icon {
            font-size: 2rem;
            color: var(--primary-color);
        }
        
        .install-text {
            flex: 1;
        }
        
        .install-text h3 {
            font-size: 1rem;
            margin-bottom: 5px;
        }
        
        .install-text p {
            font-size: 0.85rem;
            color: #666;
        }
        
        .install-actions {
            display: flex;
            gap: 10px;
        }
        
        .install-btn {
            padding: 8px 15px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
        }
        
        .install-cancel {
            background: #f1f1f1;
            color: #666;
        }
        
        /* 内容区域 */
        .content {
            flex: 1;
            padding: 20px 15px 80px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* 界面切换 */
        .screen {
            display: none;
        }
        
        .screen.active {
            display: block;
        }
        
        /* 留言界面 */
        .compose-card {
            background: var(--card-color);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
        }
        
        .compose-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: var(--primary-color);
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .compose-title i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .message-input {
            width: 100%;
            min-height: 120px;
            padding: 15px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            resize: none;
            font-size: 1rem;
            margin-bottom: 15px;
            outline: none;
            transition: border-color 0.3s;
            font-family: inherit;
        }
        
        .message-input:focus {
            border-color: var(--primary-color);
        }
        
        /* 媒体上传区域 */
        .media-upload {
            margin-bottom: 15px;
        }
        
        .upload-options {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .upload-btn {
            flex: 1;
            padding: 12px;
            background: var(--background-color);
            border: 2px dashed var(--border-color);
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        
        .upload-btn:active {
            background: var(--border-color);
        }
        
        .upload-btn i {
            font-size: 1.5rem;
            color: var(--primary-color);
        }
        
        .preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .preview-item {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .preview-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .remove-media {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            cursor: pointer;
        }
        
        /* 表情选择 */
        .emotion-section {
            margin-bottom: 15px;
        }
        
        .emotion-title {
            margin-bottom: 12px;
            color: var(--text-color);
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .emotion-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        
        .emotion-tab {
            padding: 5px 12px;
            background: var(--background-color);
            border-radius: 15px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .emotion-tab.active {
            background: var(--primary-color);
            color: white;
        }
        
        .emotions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            max-height: 150px;
            overflow-y: auto;
        }
        
        .emotion {
            font-size: 1.8rem;
            cursor: pointer;
            transition: all 0.3s;
            padding: 6px;
            border-radius: 10px;
            background: var(--background-color);
        }
        
        .emotion:hover, .emotion.selected {
            transform: scale(1.15);
            background: #ffc3d5;
            box-shadow: 0 0 10px rgba(232, 67, 147, 0.3);
        }
        
        /* 纪念日界面 */
        .anniversary-card {
            background: var(--card-color);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
        }
        
        .anniversary-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: var(--primary-color);
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .anniversary-title i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .anniversary-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .anniversary-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: var(--background-color);
            border-radius: 12px;
            border-left: 4px solid var(--primary-color);
        }
        
        .anniversary-info h3 {
            font-size: 1rem;
            margin-bottom: 5px;
            color: var(--text-color);
        }
        
        .anniversary-info p {
            font-size: 0.85rem;
            color: #888;
        }
        
        .anniversary-days {
            text-align: center;
            min-width: 70px;
        }
        
        .days-count {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }
        
        .days-label {
            font-size: 0.75rem;
            color: #888;
        }
        
        .calendar-container {
            background: var(--card-color);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
        }
        
        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .calendar-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .calendar-nav {
            display: flex;
            gap: 10px;
        }
        
        .calendar-nav-btn {
            background: var(--background-color);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .calendar-nav-btn:active {
            background: var(--border-color);
        }
        
        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--primary-color);
        }
        
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }
        
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .calendar-day.other-month {
            color: #ccc;
        }
        
        .calendar-day.today {
            background: var(--primary-color);
            color: white;
        }
        
        .calendar-day.anniversary {
            position: relative;
        }
        
        .calendar-day.anniversary::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 50%;
        }
        
        /* 相册界面 */
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .gallery-item {
            aspect-ratio: 1;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .empty-gallery {
            text-align: center;
            padding: 50px 20px;
            color: #aaa;
            grid-column: 1 / -1;
        }
        
        .empty-gallery i {
            font-size: 3.5rem;
            margin-bottom: 15px;
            color: var(--border-color);
        }
        
        /* 个人界面 */
        .profile-card {
            background: var(--card-color);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            border: 1px solid var(--border-color);
            text-align: center;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: var(--background-color);
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: var(--primary-color);
            border: 3px solid var(--border-color);
        }
        
        .profile-name {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 5px;
            color: var(--text-color);
        }
        
        .profile-bio {
            color: #888;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }
        
        .profile-stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: #888;
        }
        
        .settings-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: var(--background-color);
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .setting-item:active {
            background: var(--border-color);
        }
        
        .setting-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .setting-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .setting-name {
            font-weight: 500;
        }
        
        .setting-arrow {
            color: #ccc;
        }
        
        /* 按钮 */
        .action-buttons {
            display: flex;
            gap: 12px;
        }
        
        .action-btn {
            flex: 1;
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(232, 67, 147, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .action-btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 6px rgba(232, 67, 147, 0.3);
        }
        
        .action-btn.secondary {
            background: var(--border-color);
            color: var(--text-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
        
        /* 留言列表 */
        .messages-section {
            margin-top: 10px;
        }
        
        .messages-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: var(--primary-color);
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .messages-title i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        
        .message-item {
            background: var(--card-color);
            border-radius: 16px;
            padding: 18px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
            border-left: 5px solid var(--primary-color);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .message-item:active {
            transform: scale(0.98);
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .message-sender {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .message-time {
            font-size: 0.8rem;
            color: #888;
        }
        
        .message-emotion {
            font-size: 2.2rem;
            margin-bottom: 12px;
            text-align: center;
        }
        
        .message-text {
            margin-bottom: 12px;
            line-height: 1.5;
            font-size: 1rem;
        }
        
        .message-media {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .message-media img {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            object-fit: cover;
        }
        
        .empty-messages {
            text-align: center;
            padding: 50px 20px;
            color: #aaa;
        }
        
        .empty-messages i {
            font-size: 3.5rem;
            margin-bottom: 15px;
            color: var(--border-color);
        }
        
        .empty-messages p {
            font-size: 1rem;
        }
        
        /* 详情弹窗 */
        .message-detail {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }
        
        .message-detail.active {
            opacity: 1;
            visibility: visible;
        }
        
        .detail-content {
            background: var(--card-color);
            border-radius: 20px;
            padding: 25px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .message-detail.active .detail-content {
            transform: translateY(0);
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #888;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .close-btn:active {
            background: #f5f5f5;
        }
        
        .detail-emotion {
            font-size: 4rem;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .detail-text {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 20px;
            padding: 15px;
            background: var(--background-color);
            border-radius: 12px;
        }
        
        .detail-media {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .detail-media img {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            object-fit: cover;
        }
        
        .detail-meta {
            text-align: right;
            color: #888;
            font-size: 0.9rem;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 12px 0;
            border-top: 1px solid var(--border-color);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.75rem;
            color: #888;
            transition: all 0.3s;
        }
        
        .nav-item.active {
            color: var(--primary-color);
        }
        
        .nav-icon {
            font-size: 1.3rem;
            margin-bottom: 4px;
        }
        
        /* 响应式调整 */
        @media (max-width: 380px) {
            .header h1 {
                font-size: 1.3rem;
            }
            
            .compose-card, .message-item {
                padding: 15px;
            }
            
            .emotion {
                font-size: 1.6rem;
            }
            
            .action-btn {
                padding: 12px;
                font-size: 0.95rem;
            }
        }
        
        /* 动画效果 */
        @keyframes floatUp {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-80px) scale(1.3);
                opacity: 0;
            }
        }
        
        .heart-animation {
            position: fixed;
            font-size: 24px;
            color: var(--primary-color);
            pointer-events: none;
            opacity: 0;
            z-index: 1000;
        }
        
        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* 表情包数据 */
        .sticker-pack {
            display: none;
        }
        
        .sticker-pack.active {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
    </style>
</head>
<body>
    <!-- 登录界面 -->
    <div class="login-screen" id="login-screen">
        <div class="login-container">
            <div class="login-icon">💌</div>
            <h1 class="login-title">甜蜜留言箱</h1>
            <p class="login-subtitle">请输入密码访问</p>
            <input type="password" class="password-input" id="password-input" placeholder="请输入密码" maxlength="7">
            <button class="login-btn" id="login-btn">进入留言箱</button>
            <div class="login-error" id="login-error">密码错误，请重新输入</div>
        </div>
    </div>
    
    <!-- 主应用 -->
    <div class="app-container" id="app-container" style="display: none;">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="header-title">
                <h1 id="header-title">甜蜜留言箱</h1>
                <p id="header-subtitle">记录我们的点点滴滴</p>
            </div>
            <button class="logout-btn" id="logout-btn" title="退出登录">
                <i class="fas fa-sign-out-alt"></i>
            </button>
        </div>
        
        <!-- 安装提示 -->
        <div class="install-prompt" id="install-prompt">
            <div class="install-icon">💌</div>
            <div class="install-text">
                <h3>添加到桌面</h3>
                <p>安装应用，随时随地查看留言</p>
            </div>
            <div class="install-actions">
                <button class="install-btn" id="install-btn">安装</button>
                <button class="install-btn install-cancel" id="install-cancel">取消</button>
            </div>
        </div>
        
        <!-- 主要内容 -->
        <div class="content">
            <!-- 留言界面 -->
            <div class="screen active" id="message-screen">
                <!-- 写留言区域 -->
                <div class="compose-card">
                    <div class="compose-title">
                        <i class="fas fa-edit"></i>
                        <span>写留言</span>
                    </div>
                    <textarea class="message-input" id="message-input" placeholder="写下你想对TA说的话..."></textarea>
                    
                    <!-- 媒体上传区域 -->
                    <div class="media-upload">
                        <div class="upload-options">
                            <div class="upload-btn" id="photo-btn">
                                <i class="fas fa-camera"></i>
                                <span>添加照片</span>
                            </div>
                            <div class="upload-btn" id="album-btn">
                                <i class="fas fa-images"></i>
                                <span>从相册选择</span>
                            </div>
                        </div>
                        <div class="preview-container" id="media-preview">
                            <!-- 媒体预览将在这里显示 -->
                        </div>
                    </div>
                    
                    <!-- 表情选择 -->
                    <div class="emotion-section">
                        <div class="emotion-title">
                            <span>添加表情</span>
                        </div>
                        <div class="emotion-tabs">
                            <div class="emotion-tab active" data-tab="emotions">表情</div>
                            <div class="emotion-tab" data-tab="stickers">表情包</div>
                            <div class="emotion-tab" data-tab="love">爱心</div>
                        </div>
                        
                        <!-- 表情 -->
                        <div class="sticker-pack active" id="emotions-pack">
                            <div class="emotion" data-emotion="❤️">❤️</div>
                            <div class="emotion" data-emotion="😊">😊</div>
                            <div class="emotion" data-emotion="🥰">🥰</div>
                            <div class="emotion" data-emotion="😘">😘</div>
                            <div class="emotion" data-emotion="🤗">🤗</div>
                            <div class="emotion" data-emotion="😍">😍</div>
                            <div class="emotion" data-emotion="😂">😂</div>
                            <div class="emotion" data-emotion="😢">😢</div>
                            <div class="emotion" data-emotion="🤔">🤔</div>
                            <div class="emotion" data-emotion="😴">😴</div>
                        </div>
                        
                        <!-- 表情包 -->
                        <div class="sticker-pack" id="stickers-pack">
                            <!-- 表情包将通过JavaScript添加 -->
                        </div>
                        
                        <!-- 爱心表情 -->
                        <div class="sticker-pack" id="love-pack">
                            <div class="emotion" data-emotion="💕">💕</div>
                            <div class="emotion" data-emotion="💖">💖</div>
                            <div class="emotion" data-emotion="💗">💗</div>
                            <div class="emotion" data-emotion="💓">💓</div>
                            <div class="emotion" data-emotion="💞">💞</div>
                            <div class="emotion" data-emotion="💘">💘</div>
                            <div class="emotion" data-emotion="💝">💝</div>
                            <div class="emotion" data-emotion="💟">💟</div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button class="action-btn secondary" id="clear-btn">
                            <i class="fas fa-eraser"></i> 清空
                        </button>
                        <button class="action-btn" id="send-btn">
                            <i class="fas fa-paper-plane"></i> 发送
                        </button>
                    </div>
                </div>
                
                <!-- 留言列表 -->
                <div class="messages-section">
                    <div class="messages-title">
                        <i class="fas fa-inbox"></i>
                        <span>留言记录</span>
                    </div>
                    
                    <div id="messages-list">
                        <!-- 留言列表将由JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            
            <!-- 纪念日界面 -->
            <div class="screen" id="anniversary-screen">
                <div class="anniversary-card">
                    <div class="anniversary-title">
                        <i class="fas fa-heart"></i>
                        <span>我们的纪念日</span>
                    </div>
                    <div class="anniversary-list" id="anniversary-list">
                        <!-- 纪念日列表将通过JavaScript动态生成 -->
                    </div>
                </div>
                
                <div class="calendar-container">
                    <div class="calendar-header">
                        <div class="calendar-title" id="calendar-title">2023年11月</div>
                        <div class="calendar-nav">
                            <button class="calendar-nav-btn" id="prev-month">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <button class="calendar-nav-btn" id="next-month">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="calendar-weekdays">
                        <div>日</div>
                        <div>一</div>
                        <div>二</div>
                        <div>三</div>
                        <div>四</div>
                        <div>五</div>
                        <div>六</div>
                    </div>
                    <div class="calendar-days" id="calendar-days">
                        <!-- 日历天数将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            
            <!-- 相册界面 -->
            <div class="screen" id="gallery-screen">
                <div class="compose-card">
                    <div class="compose-title">
                        <i class="fas fa-images"></i>
                        <span>我们的相册</span>
                    </div>
                    <div class="gallery-container" id="gallery-container">
                        <!-- 相册内容将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>
            
            <!-- 个人界面 -->
            <div class="screen" id="profile-screen">
                <div class="profile-card">
                    <div class="profile-avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="profile-name" id="profile-name">甜蜜情侣</div>
                    <div class="profile-bio">记录我们的爱情故事 ❤️</div>
                    <div class="profile-stats">
                        <div class="stat-item">
                            <div class="stat-value" id="message-count">0</div>
                            <div class="stat-label">留言</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" id="photo-count">0</div>
                            <div class="stat-label">照片</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value" id="days-count">0</div>
                            <div class="stat-label">在一起</div>
                        </div>
                    </div>
                </div>
                
                <div class="settings-list">
                    <div class="setting-item" id="change-password">
                        <div class="setting-info">
                            <div class="setting-icon">
                                <i class="fas fa-lock"></i>
                            </div>
                            <div class="setting-name">修改密码</div>
                        </div>
                        <div class="setting-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="setting-item" id="backup-data">
                        <div class="setting-info">
                            <div class="setting-icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <div class="setting-name">备份数据</div>
                        </div>
                        <div class="setting-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="setting-item" id="clear-data">
                        <div class="setting-info">
                            <div class="setting-icon">
                                <i class="fas fa-trash"></i>
                            </div>
                            <div class="setting-name">清空数据</div>
                        </div>
                        <div class="setting-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="setting-item" id="about-app">
                        <div class="setting-info">
                            <div class="setting-icon">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <div class="setting-name">关于应用</div>
                        </div>
                        <div class="setting-arrow">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" data-screen="message-screen">
                <div class="nav-icon">💌</div>
                <span>留言</span>
            </div>
            <div class="nav-item" data-screen="anniversary-screen">
                <div class="nav-icon">❤️</div>
                <span>纪念日</span>
            </div>
            <div class="nav-item" data-screen="gallery-screen">
                <div class="nav-icon">📸</div>
                <span>相册</span>
            </div>
            <div class="nav-item" data-screen="profile-screen">
                <div class="nav-icon">👤</div>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <!-- 留言详情弹窗 -->
    <div class="message-detail" id="message-detail">
        <div class="detail-content">
            <button class="close-btn" id="close-detail">
                <i class="fas fa-times"></i>
            </button>
            <div class="detail-emotion" id="detail-emotion">❤️</div>
            <div class="detail-text" id="detail-text">这里是留言内容...</div>
            <div class="detail-media" id="detail-media">
                <!-- 媒体内容将在这里显示 -->
            </div>
            <div class="detail-meta" id="detail-meta">发送时间: 2023-11-15 14:30</div>
        </div>
    </div>

    <!-- 隐藏的文件输入 -->
    <input type="file" id="file-input" accept="image/*" multiple style="display: none;">

    <script>
        // 密码设置
        const PASSWORD = "1314520";
        
        // 应用数据
        let messages = JSON.parse(localStorage.getItem('loveMessages')) || [];
        let selectedEmotion = '❤️';
        let selectedMedia = [];
        let deferredPrompt = null;
        let currentDate = new Date();
        
        // 纪念日数据
        let anniversaries = JSON.parse(localStorage.getItem('loveAnniversaries')) || [
            { name: "在一起的日子", date: "2023-01-01", type: "love" },
            { name: "第一次约会", date: "2023-02-14", type: "date" },
            { name: "第一次旅行", date: "2023-05-01", type: "travel" }
        ];
        
        // 表情包数据
        const stickerPacks = {
            stickers: [
                '😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃',
                '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '😙',
                '😋', '😛', '😜', '🤪', '😝', '🤑', '🤗', '🤭', '🤫', '🤔'
            ]
        };
        
        // DOM元素
        const loginScreen = document.getElementById('login-screen');
        const passwordInput = document.getElementById('password-input');
        const loginBtn = document.getElementById('login-btn');
        const loginError = document.getElementById('login-error');
        const appContainer = document.getElementById('app-container');
        const logoutBtn = document.getElementById('logout-btn');
        const installPrompt = document.getElementById('install-prompt');
        const installBtn = document.getElementById('install-btn');
        const installCancel = document.getElementById('install-cancel');
        const headerTitle = document.getElementById('header-title');
        const headerSubtitle = document.getElementById('header-subtitle');
        
        // 导航元素
        const navItems = document.querySelectorAll('.nav-item');
        const screens = document.querySelectorAll('.screen');
        
        // 留言界面元素
        const messageInput = document.getElementById('message-input');
        const emotionsContainer = document.getElementById('emotions-pack');
        const stickersPack = document.getElementById('stickers-pack');
        const clearBtn = document.getElementById('clear-btn');
        const sendBtn = document.getElementById('send-btn');
        const messagesList = document.getElementById('messages-list');
        const messageDetail = document.getElementById('message-detail');
        const closeDetail = document.getElementById('close-detail');
        const detailEmotion = document.getElementById('detail-emotion');
        const detailText = document.getElementById('detail-text');
        const detailMedia = document.getElementById('detail-media');
        const detailMeta = document.getElementById('detail-meta');
        const photoBtn = document.getElementById('photo-btn');
        const albumBtn = document.getElementById('album-btn');
        const mediaPreview = document.getElementById('media-preview');
        const fileInput = document.getElementById('file-input');
        const emotionTabs = document.querySelectorAll('.emotion-tab');
        
        // 纪念日界面元素
        const anniversaryList = document.getElementById('anniversary-list');
        const calendarTitle = document.getElementById('calendar-title');
        const calendarDays = document.getElementById('calendar-days');
        const prevMonthBtn = document.getElementById('prev-month');
        const nextMonthBtn = document.getElementById('next-month');
        
        // 相册界面元素
        const galleryContainer = document.getElementById('gallery-container');
        
        // 个人界面元素
        const profileName = document.getElementById('profile-name');
        const messageCount = document.getElementById('message-count');
        const photoCount = document.getElementById('photo-count');
        const daysCount = document.getElementById('days-count');
        const changePassword = document.getElementById('change-password');
        const backupData = document.getElementById('backup-data');
        const clearData = document.getElementById('clear-data');
        const aboutApp = document.getElementById('about-app');
        
        // 初始化
        function init() {
            // 检查是否已登录
            checkLoginStatus();
            
            // 设置登录事件
            loginBtn.addEventListener('click', handleLogin);
            passwordInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') handleLogin();
            });
            
            // 设置退出登录
            logoutBtn.addEventListener('click', handleLogout);
            
            // 设置PWA安装提示
            setupPWA();
            
            // 设置导航切换
            setupNavigation();
            
            // 设置应用功能
            setupApp();
            
            // 初始化纪念日界面
            initAnniversaryScreen();
            
            // 初始化相册界面
            initGalleryScreen();
            
            // 初始化个人界面
            initProfileScreen();
        }
        
        // 检查登录状态
        function checkLoginStatus() {
            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
            if (isLoggedIn) {
                showApp();
            } else {
                showLogin();
            }
        }
        
        // 处理登录
        function handleLogin() {
            const password = passwordInput.value.trim();
            if (password === PASSWORD) {
                localStorage.setItem('isLoggedIn', 'true');
                showApp();
            } else {
                loginError.style.display = 'block';
                passwordInput.value = '';
                passwordInput.focus();
            }
        }
        
        // 处理退出登录
        function handleLogout() {
            localStorage.removeItem('isLoggedIn');
            showLogin();
        }
        
        // 显示登录界面
        function showLogin() {
            loginScreen.classList.remove('hidden');
            appContainer.style.display = 'none';
            passwordInput.value = '';
            loginError.style.display = 'none';
        }
        
        // 显示应用
        function showApp() {
            loginScreen.classList.add('hidden');
            appContainer.style.display = 'flex';
        }
        
        // 设置PWA功能
        function setupPWA() {
            // 监听beforeinstallprompt事件
            window.addEventListener('beforeinstallprompt', (e) => {
                // 阻止默认安装提示
                e.preventDefault();
                // 保存事件以便后续使用
                deferredPrompt = e;
                // 显示自定义安装提示
                showInstallPrompt();
            });
            
            // 安装按钮点击事件
            installBtn.addEventListener('click', async () => {
                if (deferredPrompt) {
                    // 显示安装提示
                    deferredPrompt.prompt();
                    // 等待用户响应
                    const { outcome } = await deferredPrompt.userChoice;
                    if (outcome === 'accepted') {
                        console.log('用户接受了安装提示');
                    } else {
                        console.log('用户拒绝了安装提示');
                    }
                    // 清除保存的提示
                    deferredPrompt = null;
                    // 隐藏安装提示
                    hideInstallPrompt();
                }
            });
            
            // 取消安装按钮
            installCancel.addEventListener('click', hideInstallPrompt);
            
            // 监听应用安装成功事件
            window.addEventListener('appinstalled', () => {
                console.log('应用已成功安装');
                deferredPrompt = null;
                hideInstallPrompt();
            });
        }
        
        // 显示安装提示
        function showInstallPrompt() {
            // 检查是否已安装
            if (window.matchMedia('(display-mode: standalone)').matches) {
                return;
            }
            
            // 延迟显示，避免干扰用户体验
            setTimeout(() => {
                installPrompt.style.display = 'flex';
            }, 3000);
        }
        
        // 隐藏安装提示
        function hideInstallPrompt() {
            installPrompt.style.display = 'none';
        }
        
        // 设置导航切换
        function setupNavigation() {
            navItems.forEach(item => {
                item.addEventListener('click', () => {
                    const screenId = item.getAttribute('data-screen');
                    
                    // 更新导航状态
                    navItems.forEach(nav => nav.classList.remove('active'));
                    item.classList.add('active');
                    
                    // 更新界面
                    screens.forEach(screen => screen.classList.remove('active'));
                    document.getElementById(screenId).classList.add('active');
                    
                    // 更新标题
                    updateHeader(screenId);
                });
            });
        }
        
        // 更新标题
        function updateHeader(screenId) {
            switch(screenId) {
                case 'message-screen':
                    headerTitle.textContent = '甜蜜留言箱';
                    headerSubtitle.textContent = '记录我们的点点滴滴';
                    break;
                case 'anniversary-screen':
                    headerTitle.textContent = '纪念日';
                    headerSubtitle.textContent = '记录每一个重要时刻';
                    break;
                case 'gallery-screen':
                    headerTitle.textContent = '我们的相册';
                    headerSubtitle.textContent = '珍藏美好回忆';
                    break;
                case 'profile-screen':
                    headerTitle.textContent = '个人中心';
                    headerSubtitle.textContent = '管理你的账户';
                    break;
            }
        }
        
        // 设置应用功能
        function setupApp() {
            // 设置情绪选择事件
            setupEmotionSelection();
            
            // 设置表情包
            setupStickers();
            
            // 设置标签切换
            setupTabSwitching();
            
            // 加载留言列表
            loadMessages();
            
            // 设置按钮事件
            clearBtn.addEventListener('click', clearMessage);
            sendBtn.addEventListener('click', sendMessage);
            closeDetail.addEventListener('click', closeMessageDetail);
            
            // 设置媒体上传
            photoBtn.addEventListener('click', () => openCamera());
            albumBtn.addEventListener('click', () => openAlbum());
            fileInput.addEventListener('change', handleFileSelect);
            
            // 点击弹窗外部关闭
            messageDetail.addEventListener('click', (e) => {
                if (e.target === messageDetail) {
                    closeMessageDetail();
                }
            });
        }
        
        // 初始化纪念日界面
        function initAnniversaryScreen() {
            // 渲染纪念日列表
            renderAnniversaries();
            
            // 渲染日历
            renderCalendar();
            
            // 设置日历导航
            prevMonthBtn.addEventListener('click', () => {
                currentDate.setMonth(currentDate.getMonth() - 1);
                renderCalendar();
            });
            
            nextMonthBtn.addEventListener('click', () => {
                currentDate.setMonth(currentDate.getMonth() + 1);
                renderCalendar();
            });
        }
        
        // 渲染纪念日列表
        function renderAnniversaries() {
            if (anniversaries.length === 0) {
                anniversaryList.innerHTML = `
                    <div class="empty-messages">
                        <i class="fas fa-heart"></i>
                        <p>还没有添加纪念日</p>
                    </div>
                `;
                return;
            }
            
            anniversaryList.innerHTML = anniversaries.map(anniversary => {
                const today = new Date();
                const anniversaryDate = new Date(anniversary.date);
                const timeDiff = today.getTime() - anniversaryDate.getTime();
                const daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
                
                return `
                    <div class="anniversary-item">
                        <div class="anniversary-info">
                            <h3>${anniversary.name}</h3>
                            <p>${formatDate(anniversary.date, true)}</p>
                        </div>
                        <div class="anniversary-days">
                            <div class="days-count">${daysDiff}</div>
                            <div class="days-label">天</div>
                        </div>
                    </div>
                `;
            }).join('');
        }
        
        // 渲染日历
        function renderCalendar() {
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();
            
            // 更新日历标题
            calendarTitle.textContent = `${year}年${month + 1}月`;
            
            // 获取当月第一天和最后一天
            const firstDay = new Date(year, month, 1);
            const lastDay = new Date(year, month + 1, 0);
            
            // 获取当月第一天是星期几（0是星期日）
            const firstDayIndex = firstDay.getDay();
            
            // 获取上个月的最后几天
            const prevLastDay = new Date(year, month, 0).getDate();
            
            // 获取下个月的前几天
            const nextDays = 7 - lastDay.getDay() - 1;
            
            // 清空日历
            calendarDays.innerHTML = '';
            
            // 添加上个月的日期
            for (let i = firstDayIndex; i > 0; i--) {
                const day = prevLastDay - i + 1;
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day other-month';
                dayElement.textContent = day;
                calendarDays.appendChild(dayElement);
            }
            
            // 添加当月的日期
            for (let i = 1; i <= lastDay.getDate(); i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                dayElement.textContent = i;
                
                // 检查是否是今天
                const today = new Date();
                if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
                    dayElement.classList.add('today');
                }
                
                // 检查是否是纪念日
                const dateStr = `${year}-${(month + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`;
                const isAnniversary = anniversaries.some(a => a.date === dateStr);
                if (isAnniversary) {
                    dayElement.classList.add('anniversary');
                }
                
                calendarDays.appendChild(dayElement);
            }
            
            // 添加下个月的日期
            for (let i = 1; i <= nextDays; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day other-month';
                dayElement.textContent = i;
                calendarDays.appendChild(dayElement);
            }
        }
        
        // 初始化相册界面
        function initGalleryScreen() {
            // 从留言中提取所有图片
            const allImages = [];
            messages.forEach(message => {
                if (message.media && message.media.length > 0) {
                    allImages.push(...message.media);
                }
            });
            
            if (allImages.length === 0) {
                galleryContainer.innerHTML = `
                    <div class="empty-gallery">
                        <i class="fas fa-images"></i>
                        <p>还没有照片，快去留言中添加吧～</p>
                    </div>
                `;
                return;
            }
            
            galleryContainer.innerHTML = allImages.map(image => `
                <div class="gallery-item">
                    <img src="${image}" alt="回忆照片">
                </div>
            `).join('');
        }
        
        // 初始化个人界面
        function initProfileScreen() {
            // 更新统计数据
            updateProfileStats();
            
            // 设置个人设置事件
            changePassword.addEventListener('click', () => {
                const newPassword = prompt('请输入新密码:');
                if (newPassword && newPassword.length >= 4) {
                    // 在实际应用中，这里应该加密存储密码
                    showToast('密码修改成功');
                } else if (newPassword) {
                    showToast('密码长度至少4位');
                }
            });
            
            backupData.addEventListener('click', () => {
                showToast('数据备份功能开发中...');
            });
            
            clearData.addEventListener('click', () => {
                if (confirm('确定要清空所有数据吗？此操作不可恢复！')) {
                    localStorage.removeItem('loveMessages');
                    localStorage.removeItem('loveAnniversaries');
                    messages = [];
                    anniversaries = [];
                    loadMessages();
                    renderAnniversaries();
                    initGalleryScreen();
                    updateProfileStats();
                    showToast('数据已清空');
                }
            });
            
            aboutApp.addEventListener('click', () => {
                alert('甜蜜留言箱 v1.0\n\n专为情侣设计的私密留言应用\n记录你们的每一个美好瞬间 ❤️');
            });
        }
        
        // 更新个人统计数据
        function updateProfileStats() {
            // 留言数量
            messageCount.textContent = messages.length;
            
            // 照片数量
            const photoCountValue = messages.reduce((count, message) => {
                return count + (message.media ? message.media.length : 0);
            }, 0);
            photoCount.textContent = photoCountValue;
            
            // 在一起天数（从第一个纪念日计算）
            if (anniversaries.length > 0) {
                const firstAnniversary = new Date(anniversaries[0].date);
                const today = new Date();
                const timeDiff = today.getTime() - firstAnniversary.getTime();
                const daysDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
                daysCount.textContent = daysDiff;
            } else {
                daysCount.textContent = '0';
            }
        }
        
        // 设置表情选择
        function setupEmotionSelection() {
            const emotionElements = emotionsContainer.querySelectorAll('.emotion');
            emotionElements.forEach(emotion => {
                emotion.addEventListener('click', () => {
                    // 移除其他情绪的选择状态
                    emotionElements.forEach(e => e.classList.remove('selected'));
                    // 设置当前情绪为选中状态
                    emotion.classList.add('selected');
                    selectedEmotion = emotion.getAttribute('data-emotion');
                    
                    // 添加到输入框
                    messageInput.value += selectedEmotion;
                });
            });
            
            // 默认选择第一个情绪
            if (emotionElements.length > 0) {
                emotionElements[0].classList.add('selected');
            }
        }
        
        // 设置表情包
        function setupStickers() {
            // 添加表情包到界面
            stickerPacks.stickers.forEach(sticker => {
                const stickerEl = document.createElement('div');
                stickerEl.className = 'emotion';
                stickerEl.setAttribute('data-emotion', sticker);
                stickerEl.textContent = sticker;
                stickerEl.addEventListener('click', () => {
                    messageInput.value += sticker;
                });
                stickersPack.appendChild(stickerEl);
            });
        }
        
        // 设置标签切换
        function setupTabSwitching() {
            emotionTabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    // 移除所有标签的激活状态
                    emotionTabs.forEach(t => t.classList.remove('active'));
                    // 激活当前标签
                    tab.classList.add('active');
                    
                    // 显示对应的表情包
                    const tabId = tab.getAttribute('data-tab');
                    document.querySelectorAll('.sticker-pack').forEach(pack => {
                        pack.classList.remove('active');
                    });
                    document.getElementById(`${tabId}-pack`).classList.add('active');
                });
            });
        }
        
        // 打开相机
        function openCamera() {
            fileInput.setAttribute('capture', 'camera');
            fileInput.click();
        }
        
        // 打开相册
        function openAlbum() {
            fileInput.removeAttribute('capture');
            fileInput.click();
        }
        
        // 处理文件选择
        function handleFileSelect(e) {
            const files = e.target.files;
            if (files.length === 0) return;
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        selectedMedia.push(e.target.result);
                        updateMediaPreview();
                    };
                    reader.readAsDataURL(file);
                }
            }
            
            // 重置文件输入
            fileInput.value = '';
        }
        
        // 更新媒体预览
        function updateMediaPreview() {
            mediaPreview.innerHTML = '';
            
            selectedMedia.forEach((media, index) => {
                const previewItem = document.createElement('div');
                previewItem.className = 'preview-item';
                
                const img = document.createElement('img');
                img.src = media;
                
                const removeBtn = document.createElement('div');
                removeBtn.className = 'remove-media';
                removeBtn.innerHTML = '×';
                removeBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    selectedMedia.splice(index, 1);
                    updateMediaPreview();
                });
                
                previewItem.appendChild(img);
                previewItem.appendChild(removeBtn);
                mediaPreview.appendChild(previewItem);
            });
        }
        
        // 加载留言列表
        function loadMessages() {
            if (messages.length === 0) {
                messagesList.innerHTML = `
                    <div class="empty-messages">
                        <i class="fas fa-envelope-open"></i>
                        <p>还没有留言，写下第一条心声吧～</p>
                    </div>
                `;
                return;
            }
            
            // 按时间倒序排列
            const sortedMessages = [...messages].sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
            
            messagesList.innerHTML = sortedMessages.map((message, index) => `
                <div class="message-item" data-index="${sortedMessages.length - 1 - index}">
                    <div class="message-header">
                        <div class="message-sender">${message.sender || '匿名'}</div>
                        <div class="message-time">${formatDate(message.timestamp)}</div>
                    </div>
                    ${message.emotion ? `<div class="message-emotion">${message.emotion}</div>` : ''}
                    <div class="message-text">${message.text.length > 100 ? message.text.substring(0, 100) + '...' : message.text}</div>
                    ${message.media && message.media.length > 0 ? `
                        <div class="message-media">
                            ${message.media.map(media => `<img src="${media}" alt="附件">`).join('')}
                        </div>
                    ` : ''}
                </div>
            `).join('');
            
            // 添加点击事件
            const messageItems = messagesList.querySelectorAll('.message-item');
            messageItems.forEach(item => {
                item.addEventListener('click', () => {
                    const index = parseInt(item.getAttribute('data-index'));
                    showMessageDetail(index);
                });
            });
        }
        
        // 显示留言详情
        function showMessageDetail(index) {
            const message = messages[index];
            detailEmotion.textContent = message.emotion || '';
            detailText.textContent = message.text;
            
            // 显示媒体
            detailMedia.innerHTML = '';
            if (message.media && message.media.length > 0) {
                message.media.forEach(media => {
                    const img = document.createElement('img');
                    img.src = media;
                    detailMedia.appendChild(img);
                });
            }
            
            detailMeta.textContent = `发送时间: ${formatDate(message.timestamp, true)}`;
            messageDetail.classList.add('active');
            
            // 阻止背景滚动
            document.body.style.overflow = 'hidden';
        }
        
        // 关闭留言详情
        function closeMessageDetail() {
            messageDetail.classList.remove('active');
            document.body.style.overflow = '';
        }
        
        // 发送留言
        function sendMessage() {
            const text = messageInput.value.trim();
            if (!text && selectedMedia.length === 0) {
                showToast('请输入留言内容或添加照片！');
                return;
            }
            
            // 显示发送中状态
            const originalText = sendBtn.innerHTML;
            sendBtn.innerHTML = '<div class="loading"></div> 发送中...';
            sendBtn.disabled = true;
            
            setTimeout(() => {
                const newMessage = {
                    text: text,
                    emotion: selectedEmotion,
                    media: [...selectedMedia],
                    timestamp: new Date().toISOString(),
                    sender: prompt('请输入你的名字（可选）:', '') || '匿名'
                };
                
                messages.push(newMessage);
                saveMessages();
                loadMessages();
                clearMessage();
                
                // 更新相册和个人统计
                initGalleryScreen();
                updateProfileStats();
                
                // 恢复按钮状态
                sendBtn.innerHTML = originalText;
                sendBtn.disabled = false;
                
                // 显示成功提示
                showToast('留言发送成功！');
                createHeartAnimation(sendBtn);
            }, 800);
        }
        
        // 显示提示
        function showToast(message) {
            const toast = document.createElement('div');
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                z-index: 1001;
                font-size: 0.9rem;
                animation: fadeInOut 2s forwards;
            `;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                document.body.removeChild(toast);
            }, 2000);
        }
        
        // 清空留言
        function clearMessage() {
            messageInput.value = '';
            selectedMedia = [];
            updateMediaPreview();
        }
        
        // 保存留言到localStorage
        function saveMessages() {
            localStorage.setItem('loveMessages', JSON.stringify(messages));
        }
        
        // 格式化日期
        function formatDate(timestamp, full = false) {
            const date = new Date(timestamp);
            const now = new Date();
            const diff = now - date;
            
            // 如果是今天
            if (date.toDateString() === now.toDateString()) {
                if (diff < 60 * 1000) {
                    return '刚刚';
                } else if (diff < 60 * 60 * 1000) {
                    return `${Math.floor(diff / (60 * 1000))}分钟前`;
                } else {
                    return `${Math.floor(diff / (60 * 60 * 1000))}小时前`;
                }
            }
            
            // 如果是昨天
            const yesterday = new Date(now);
            yesterday.setDate(yesterday.getDate() - 1);
            if (date.toDateString() === yesterday.toDateString()) {
                return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            }
            
            // 其他情况
            if (full) {
                return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            } else {
                return `${date.getMonth()+1}月${date.getDate()}日`;
            }
        }
        
        // 创建爱心动画
        function createHeartAnimation(element) {
            const heart = document.createElement('div');
            heart.className = 'heart-animation';
            heart.innerHTML = '❤️';
            document.body.appendChild(heart);
            
            const rect = element.getBoundingClientRect();
            heart.style.left = rect.left + rect.width / 2 + 'px';
            heart.style.top = rect.top + 'px';
            
            heart.style.animation = 'floatUp 1s forwards';
            
            setTimeout(() => {
                document.body.removeChild(heart);
            }, 1000);
        }
        
        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInOut {
                0% { opacity: 0; transform: translate(-50%, -40%); }
                20% { opacity: 1; transform: translate(-50%, -50%); }
                80% { opacity: 1; transform: translate(-50%, -50%); }
                100% { opacity: 0; transform: translate(-50%, -60%); }
            }
        `;
        document.head.appendChild(style);
        
        // 初始化应用
        init();
    </script>
</body>
</html>